/**
 * by eval .
 */

import React, {Component} from 'react';
import {
  View,
  Image,
  TouchableOpacity,
  ScrollView,
  AsyncStorage,
  Alert
} from 'react-native';
import {i18n} from '../../../i18n/index';
import { scaleSize ,deviceHeight,deviceWidth} from '../../../utils/screen';
import FontText,{fontFamily} from '../../components/FontText';
import {Row} from '../../components/TableRow';
import styles from './index.style';
import _ from 'lodash';
import  { BigNumber } from 'bignumber.js';
let zeroNumber = new BigNumber(0);

export default class RegisterCart extends Component{
    render(){
        let {total} = this.getSubTotal();
        return (
        <View style= {{flex:1}}>
            <ScrollView style = {{flex:1}}>
                <View style = {styles.orderBox}>
                    <View style = {styles.orderControl}>
                        <FontText style = {styles.controlText} font={'book'}>{i18n.t("store.cashdrawer.close")}</FontText>
                        <FontText style = {[styles.controlText,{color:"#fff"}]} font={'light'}>{i18n.t("store.index.order")}:New</FontText>
                        <FontText style = {styles.controlText} font={'book'}>{i18n.t("store.cashdrawer.save")}</FontText>
                    </View>
                    <View style = {styles.orderTable}>
                        <Row 
                        fontstyle = {styles.ordetTdText} 
                        columnStyle = {styles.ordetTd} data = {{created:i18n.t("store.cashdrawer.created"),updated:i18n.t("store.cashdrawer.updated"),time:i18n.t("store.cashdrawer.time")}} />
                        <Row 
                        fontstyle = {[styles.ordetTdText,{color:"#fff"}]} 
                        columnStyle = {styles.ordetTd} data = {{created:"08/15/2018 11:39AM",updated:"",time:"Now"}} />
                    </View>
                    <View style = {styles.tableInfo}>
                        <View style = {styles.info}>
                        <FontText style = {styles.infoType} font = {'medium'}>{i18n.t("store.table.table")}#1</FontText>
                        </View>
                        <View style = {styles.info}>
                        <FontText style = {styles.infoType} font = {'medium'}>{i18n.t("store.table.guest")}:1</FontText>
                        </View>
                    </View>
                    <View style = {styles.noteSort}>
                        <View style = {styles.sortBox}>
                        <FontText style = {styles.sortText} font={"book"}>{i18n.t("store.table.sortbyitem")}</FontText>
                        <Image style = {styles.sortIcon} source = {require("../../../access/imgs/arrow_down.png")} />
                        </View>
                        <View style = {styles.noteBox}>
                        <Image style = {styles.noteIcon} source = {require("../../../access/imgs/note_icon_a.png")} />
                        <FontText style = {styles.noteText} font={"book"}>{i18n.t("store.table.note")}</FontText>
                        </View>
                    </View>
                </View>
                <View style = {styles.orderList}>
                   {this.renderOrderItem()}
                </View>
                {
                    this.renderOrderTotal()
                }
            </ScrollView>
            <View style = {styles.saleControl}>
                <TouchableOpacity
                    activeOpacity = {0.8}
                    onPress = {()=>this.payOrder()}
                    style = {styles.saleBtn}
                    >
                    <FontText font = {"book"} style = {styles.saleBtnText}>{total?`Pay ${i18n.t('moneytype')}${total}`:i18n.t("store.table.nosale")}</FontText>
                </TouchableOpacity>
                <View style = {styles.saleBtns}>
                <View style = {styles.cbtn}>
                    <Image style = {styles.printeIcon} source = {require("../../../access/imgs/print.png")} />
                    <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.printe")}</FontText>
                </View>
                <View style = {styles.cbtn}>
                    <Image style = {styles.emailIcon} source = {require("../../../access/imgs/email_icon.png")} />
                    <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.email")}</FontText>
                </View>
                <TouchableOpacity 
                    style = {styles.cbtn}>
                    <Image style = {styles.printeIcon} source = {require("../../../access/imgs/edit.png")} />
                    <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.edit")}</FontText>
                </TouchableOpacity>
                <TouchableOpacity 
                    onPress = {()=>this.deleteCart()}
                    activeOpacity = {0.8}
                    style = {styles.cbtn}>
                    <Image style = {styles.deleteIcon} source = {require("../../../access/imgs/delete_icon.png")} />
                    <FontText font = {'book'} style = {styles.cbtnText}>{i18n.t("btns.delete")}</FontText>
                </TouchableOpacity>
                </View>
            </View>
        </View>
        )
    }
    deleteCart(){
        Alert.alert(i18n.t("appName"),i18n.t("store.register.deletecard"),[
            {text:"Cancel"},
            {text:"OK",onPress:()=>{
                this.props.deleteCart();
            }}
        ])
    }
    renderOrderItem(){
        let {register} = this.props;
        if(register.cartList.length > 0){
            return register.cartList.map((item,index)=>{
                return (
                    <TouchableOpacity
                        activeOpacity = {0.8}
                        onPress = {()=>this.changeCart(item,index)}
                        onLongPress = {()=>this.onLongPress(item,index)} 
                        key = {`eval_${index}_${item.qty}_${item.options.length}`} style = {styles.orderItem}>
                        <View style = {styles.listitemOrder}>
                            <View style = {styles.listitemName}>
                                <FontText numberOfLines = {1} style = {styles.totalText} font = {'light'}>{item.name}</FontText>
                            </View>
                            <FontText style = {[styles.totalText,styles.listitemQty]} font = {'light'}>x{item.qty}</FontText>
                            <FontText style = {[styles.totalText,styles.listitemPrice]} font = {'light'}>{i18n.t("moneytype")}{item.price}</FontText>
                        </View>
                        {
                            item.options.map((itemo,indexo)=>{
                                return (
                                    <View key = {`eval_${indexo}`} style = {[styles.listitemOrder,styles.options]}>
                                        <View style = {[styles.listitemName,styles.listitemOption]}>
                                            <FontText numberOfLines = {1} style = {styles.listitemOption} font = {'light'}>{itemo.name}</FontText>
                                        </View>
                                        <FontText style = {[styles.listitemOption,styles.listitemQty]} font = {'light'}>{item.qty}</FontText>
                                        {
                                            itemo.price != 0
                                            ?<FontText style = {[styles.listitemOption,styles.listitemPrice]} font = {'light'}>{i18n.t("moneytype")}{itemo.price}</FontText>
                                            :<FontText font = {'light'} style = {[styles.listitemOption,styles.listitemPrice]}>-</FontText>
                                        }
                                    </View>
                                );
                            })
                        }
                        {
                            item.note?
                            <View style = {styles.noteLine}>
                                <FontText style = {styles.noteLineText} font = {'book'}>{item.note}</FontText>
                            </View>
                            :null
                        }
                    </TouchableOpacity>
                )
            })
        }else{
            return <View style = {styles.emptyView}>
                <FontText font = {'book'} style = {styles.emptyText}>{i18n.t("tips.empty")}</FontText>
            </View>
        }
    }
    renderOrderTotal(){
        let totalItem = this.getSubTotal();
        if(totalItem.total){
            return (
                <View style = {styles.orderTotal}>
                    <View style = {styles.totalItem}>
                        <FontText style = {styles.totalLable} font = {'book'}>Subtotal</FontText>
                        <FontText style = {styles.totalText} font = {'light'}>{i18n.t("moneytype")}{totalItem.subtotal}</FontText>
                    </View>
                    <View style = {styles.totalItem}>
                        <FontText style = {styles.totalLable} font = {'book'}>Tax</FontText>
                        <FontText style = {styles.totalText} font = {'light'}>{i18n.t("moneytype")}{totalItem.tax}</FontText>
                    </View>
                    <View style = {styles.totalItem}>
                        <FontText style = {styles.totalLable} font = {'book'}>Total</FontText>
                        <FontText style = {styles.totalText} font = {'light'}>{i18n.t("moneytype")}{totalItem.total}</FontText>
                    </View>
                </View>
            )
        }
        return null;
    }
    changeCart(item,index){
        let {changeCartPress} = this.props;
        changeCartPress && changeCartPress(item,index);
    }
    onLongPress(item,index){
        let {onLongPress} = this.props;
        onLongPress && onLongPress(item,index);
    }
    payOrder(){
        let subtotal = this.getSubTotal();
        if(subtotal.total){
            console.log(subtotal.total)
        }
    }
    getSubTotal(){
        let {cartList} = this.props.register;
        let subtotal = 0;
        if(Array.isArray(cartList) && cartList.length > 0){
            for(let item of cartList){
                let qty = item.qty;
                subtotal = zeroNumber.plus(item.price).multipliedBy(qty).plus(subtotal).toNumber();
                for(let option of item.options){
                    subtotal = zeroNumber.plus(option.price).multipliedBy(qty).plus(subtotal).toNumber();
                }
            }
            let storeinfo = this.$getStoreInfo();
            let taxRate = Number(_.get(storeinfo,"tax_rate.value",0));
            let tax = zeroNumber.plus(subtotal).multipliedBy(taxRate).dividedBy(100).toNumber().toFixed(2);
            return {
                tax:tax,
                subtotal:subtotal,
                total:zeroNumber.plus(tax).plus(subtotal).toNumber()
            };
        }else{
            return {
                tax:0,
                subtotal:0,
                total:0
            };
        }
    }
}